//? imrc 快速生成引入react框架
import React, { Component } from 'react';
import { message } from 'antd';
import store from '../store';
import { changeInputAction, addItemAction, deleteItemAction, getTodoList, getMyListAction } from '../store/actionCreatores';
import TodoListUI from './TodoListUI';

const data = [
    '早8点开晨会，分配今天的开发工作',
    '早9点和项目经理作开发需求讨论会',
    '晚5:30对今日代码进行review'
];

//? ccc 快速生成代码基本结构
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        this.changeInputValue = this.changeInputValue.bind(this);

        this.storeChange = this.storeChange.bind(this); // 转变this指向
        store.subscribe(this.storeChange); // 订阅Redux的状态

        this.clickBtn = this.clickBtn.bind(this);

        this.deleteItem = this.deleteItem.bind(this);
    }
    render() {
        return (
            <TodoListUI
                inputValue={this.state.inputValue}
                list={this.state.list}
                changeInputValue={this.changeInputValue}
                clickBtn={this.clickBtn}
                deleteItem={this.deleteItem}
            />
        );
    }
    componentDidMount() {
        const action = getMyListAction();
        store.dispatch(action);
        console.log(action);
    }
    // input输入
    changeInputValue(e) {
        const action = changeInputAction(e.target.value);
        store.dispatch(action);
    }
    storeChange() {
        this.setState(store.getState());
    }
    // 添加
    clickBtn() {
        if (!this.state.inputValue) {
            message.warning('请输入值！');
            return;
        }

        const action = addItemAction();
        store.dispatch(action);
    }
    // 删除
    deleteItem(index) {
        const action = deleteItemAction(index);
        store.dispatch(action);
    }
}

export default TodoList;